<template>
  <el-card class="tag-input-container">
    <div class="tag-input-item item-list" v-for="(item, index) in $props.tagData" :key="item.tagid">
      <TagInputItem :itemData="item" @onTagInputItemComplete="(t, d) => onTagInputItemComplete(t, d, index)"/>
    </div>
    <div class="tag-input-item plus-item" @click="addItem">
      <el-icon size="30" color="#ccc">
        <Plus />
      </el-icon>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { HANDLE_TYPE_ENUM, TagInputItemOriginData } from '@/types/home/constData.ts'
import type { ITagInputItemData } from '@/types/home/type'
import TagInputItem from './TagInputItem.vue';

const emit = defineEmits<{
  (event: 'onTagInputComplete', type: string, data: ITagInputItemData | undefined, index: number): void
}>()
defineProps<{
  tagData: any,
}>();

const addItem = () => {
  handleTagInputData(HANDLE_TYPE_ENUM.TYPE_ADD, {...TagInputItemOriginData})
}
const onTagInputItemComplete = (type: string, data: any, index: number) => {
  handleTagInputData(type, data, index)
}
const handleTagInputData = (type: string, data: ITagInputItemData | undefined, index: number = 0) => {
  emit('onTagInputComplete', type, data, index)
}
</script>

<style scoped lang="scss">
.tag-input-container {
  width: 100%;
  .tag-input-item {
    width: 100%;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 3px;
  }
  .item-list{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    border-color: #ccc;
  }
  .plus-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
  }
}
</style>